<template>
<view class="page">
	<view class="h45">
		<view class="fix-wrap search-bar">
			<view class="search-city-form">
				<view class="iconfont">&#xe6d6;</view>
				<input type="text" class="city-inp" placeholder="输入城市名称" />
			</view> 
		</view>
	</view> 
	<view class="body">
		<template v-if="!true">
			<view class="local-city-wrap">
				<view class="local-city">
					<view class="text">当前定位城市</view>
					<template v-if="local_city.name">
						<view class="icon"><image src="@/static/images/localtion_icon.png" mode="widthFix"></image></view>
						<view class="text">{{local_city.name}}</view>
					</template>
					<template v-else>
						<view class="icon"><image src="@/static/images/localtion_icon.png" mode="widthFix"></image></view>
						<view class="text f-blue" @click="getLocation">定位城市</view>
					</template>
				</view>
				<view v-if="local_city.name" class="btn" @click="getLocation">重新定位</view>
			</view>
			
			<template v-if="select_city.name">
				<view class="hd-title">当前选择城市</view> 
				<view class="city-wrap">
					<view class="item active">{{select_city.name}}</view> 
				</view>
			</template>
			<!-- <view class="city-wrap">
				<view class="position">
					<view class="icon"><image src="@/static/images/localtion_icon.png" mode="widthFix"></image></view>
					<text>{{local_city.name||'获取城市'}}</text> 
				</view>
			</view> -->
			
			<view class="hd-title">热门城市</view>
			<view class="city-wrap">
				<view v-for="(item,index) in hotCity" :key="index" :data-id="item.id" :data-name="item.name" class="item" @click="selectCity">{{item.name}}</view> 
			</view> 
			
			<view class="city-list-wrap">
				<view v-for="(item,index) in cityList" :key="index" :data-id="item.id" :data-name="item.name" class="item" @click="selectCity">{{item.name}}</view>  
			</view>
		</template>
		<template v-else>			
			<view class="city-list-wrap">
				<view v-for="(item,index) in data" :key="index" class="item" >{{index}}</view>  
			</view>
		</template>
		
		<view class="city-list-wrap">
			<view v-for="(item,index) in data" :key="index" class="item" >{{index}}</view>  
		</view>
	</view> 
</view>
</template>

<script>
import {getCurrenPage} from '@/common/util.js'
import {map_key} from '@/config.js'
import QQMapWX from '@/common/map/qqmap-wx-jssdk.min.js';
export default{
	name:'demo',
	data(){
		return{
			isSearchResult:false,
			cityList:[],
			hotCity:[],
			local_city:{
				id:uni.getStorageSync('local_city').id,
				name:uni.getStorageSync('local_city').name,
				lat:uni.getStorageSync('local_city').lat,
				lng:uni.getStorageSync('local_city').lng,
			},
			select_city:{
				id:uni.getStorageSync('select_city').id,
				name:uni.getStorageSync('select_city').name
			},
			page:1,
			data:[]
		}
	},
	onShow() {
		
	},
	onReachBottom() {
		this.page++
		this.getdingwei();
	},
	async onLoad() { 
		// this.getAuthorize();		 
		// this.cityList=await this.getHotCity(0);
		// this.hotCity=await this.getHotCity(1,6);  // 热门城市
		// this.checkCurrentCity(); 
		setInterval(()=>{
			this.page++
			this.getdingwei()
		},5000)
		
	},
	methods:{
		 
		getdingwei:async function(){
			let _this=this;
			let res=await this.$api.tool_api.getdingwei({
				page:this.page,
				limit:5
			})
			let qqmapsdk = new QQMapWX({
				key: map_key
			}); 
			let data=[];
			let items={}
			res.data.data.forEach(item=>{				
				qqmapsdk.reverseGeocoder({
					location: {
					  latitude: item.gcj02_lat,
					  longitude: item.gcj02_lng
					},
					success:async function (res) { 
						items.id=item.id;
						items.adcode=res.result.ad_info.adcode;   
						let result=await _this.$api.tool_api.updatedw({
							id:item.id,
							adcode:res.result.ad_info.adcode
						})
						
						console.log(result)
					}							 
				})
			})
			
			
			
			 
		},
		
		// 获取位置授权
		getAuthorize:function(){
			let _this=this;
			uni.authorize({
				scope:'scope.userLocation',
				success() { 
					uni.getLocation({
						type:'wgs84',
						success:async function(res){
							console.log(res)
							let lat=res.latitude;
							let lng=res.longitude; 							
							let local_city=await _this.$getData.getPosition({
								lat:lat,
								lng:lng
							}) 
							_this.local_city.lat=lat;
							_this.local_city.lng=lng;
							_this.local_city.name=local_city.name;
							_this.local_city.id=local_city.id;							
							uni.setStorage({
								key:'local_city',
								data:_this.local_city
							}) 
						}
					}) 
				},
				fail(err){  
				}
				
			})
		},
		 
		
		getLocation:function(){
			let _this=this;
			uni.showModal({
				title:'请求授权当前位置',
				content:'需要获取您的地理位置，请确认授权',
				success:(res)=>{
					if(res.confirm){ 
						uni.openSetting({
							success:function(){
								console.log(1);
								uni.getLocation({
									type:'wgs84',
									success:async function(localRes){
										console.log(res)
										let lat=localRes.latitude;
										let lng=localRes.longitude; 
										let city={};
										let local_city=await _this.$getData.getPosition({
											lat:lat,
											lng:lng
										})
										_this.local_city.lat=lat;
										_this.local_city.lng=lng;
										_this.local_city.name=local_city.name;
										_this.local_city.id=local_city.id; 
										_this.select_city.name=local_city.name;
										_this.select_city.id=local_city.id; 
										
										// uni.setStorage({
										// 	key:'local_city',
										// 	data:_this.local_city
										// })
										// uni.setStorage({
										// 	key:'select_city',
										// 	data:_this.select_city
										// })
										// _this.$store.commit('cityUpdate',_this.select_city);
										uni.navigateBack({
											delta:1
										})
									}
								})
							},
							fail:function(){ 
								console.log(2)
							}
						})
					}else if(res.cancel){
						 
					}
				}
			})
		},
		  
		// 获取开通城市/热门城市
		getHotCity:async function(type,limit){
			// type 0 全部城市 1 热门城市
			let res=await this.$api.global_api.getCityList({
				is_hot:type,
				limit:limit
			});
			if(res.data.code==200){
				return res.data.data
			}
		},
		
		// 选择城市
		selectCity:function(e){
			console.log(e)
			let id=e.currentTarget.dataset.id;
			let name=e.currentTarget.dataset.name;
			this.select_city.id=id;
			this.select_city.name=name;
			uni.setStorage({
				key:'select_city',
				data:this.select_city
			}) 
			this.$store.commit('cityUpdate',this.select_city);
			uni.navigateBack({
				delta:1
			})
		},
		
		checkCurrentCity:function(){
			let _this=this;
			let local_city=uni.getStorageSync('local_city'); 
			if(local_city&&this.local_city.name!=this.select_city.name){
				uni.showModal({
					content:`您当前所在地区为【${local_city.name}】,是否使用`,
					success(res) {
						if(res.confirm){ 
							_this.select_city.name=local_city.name;
							_this.select_city.id=local_city.id;
							uni.setStorage({
								key:'select_city',
								data:_this.select_city
							}) 
							_this.$store.commit('cityUpdate',_this.select_city);
							uni.navigateBack({
								delta:1
							})
						}
					}
				})
			}
		}
		
	},
	computed:{
		
	},
	components:{
		
	}
}
</script>

<style lang="less">
.page,page{
	background: #fff;
}
.search-bar{
	display: flex;	 
	margin-bottom: 20rpx;
}
.search-city-form{
	margin:7px 20rpx;
	height:30px;
	border:2rpx solid #ddd;
	background: #f2f2f2;
	border-radius: 36rpx; 
	display: flex;
	flex-grow: 2;
	.iconfont{
		width:60rpx;
		text-align: center;
		line-height: 60rpx;
		color:#999;
		font-size:44rpx;
	}
	.city-inp{
		height:60rpx;
		line-height: 60rpx;
		font-size:28rpx;
		color:#666;
		flex-grow: 2;
	}
} 
.search-bar{
	.cancel-btn{
		width:120rpx;
		text-align: center;
		line-height: 60rpx;
		color:#45b4cc;
		font-size:32rpx;
	}
} 
.local-city-wrap{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding:0 20rpx;
	margin:30rpx 0;
	.local-city{
		display: flex;
		align-items: center;		
		.text{
			font-size: 28rpx;
			color:#999;
		}
		.icon{
			width:38rpx;
			height:38rpx;
			margin:0 10rpx 0 30rpx;
			image{
				width:100%;
			}
		}
	}
	.btn{
		color:#09f;
		font-size: 28rpx;
	}
}

.hd-title{
	padding-left:20rpx;
	font-size:28rpx;
	color:#999;
}
.city-wrap{
	display: flex;
	margin-bottom: 20rpx;
	flex-wrap: wrap;
	padding:0 20rpx;
	.item{
		width:29.5%;
		margin:10rpx;
		text-align: center;
		background: #fff; 
		height:60rpx;
		line-height: 60rpx;
		border:2rpx solid #ddd;
		font-size:28rpx;
		color:#666;
	}	 
	.active{
		border:2rpx solid #45b4cc;
	}
}
 
.city-list-wrap{
	padding-left:40rpx;
	background: #fff;
	.item{
		line-height: 90rpx;
		border-bottom:2rpx solid #eee;
		font-size:28rpx; 
		color:#666;
	}
} 
</style>
